<template>
  <div class="business-detail">
    <el-card shadow="never" class="detail-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>转贷赎楼业务详情</span>
          <el-button @click="goBack" text>返回列表</el-button>
        </div>
      </template>

      <!-- 状态指示器 -->
      <div class="status-indicator" v-if="apiData?.customer">
        <div class="status-title">
          订单状态
          <el-tag class="customer-type-tag" type="info" size="small">
            {{ apiData?.customer?.customer_type === 1 ? '个人' : '企业' }}
          </el-tag>
        </div>
        <div class="status-value">
          <el-tag :type="getStatusType(apiData?.customer?.status)" size="large">
            {{ formatStatus(apiData?.customer?.status) }}
          </el-tag>
          <span class="status-desc">
            {{ apiData?.customer?.updated_at ? '更新时间: ' + apiData?.customer?.updated_at : '' }}
          </span>
        </div>
      </div>

      <!-- 基本信息 -->
      <el-descriptions title="基本信息" :column="3" border class="mt-20">
        <el-descriptions-item label="订单号">{{ apiData?.customer?.id || '-' }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ apiData?.customer?.name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ apiData?.customer?.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">自营垫资赎楼业务</el-descriptions-item>
        <el-descriptions-item label="申请金额">{{ formatAmount(apiData?.customer?.loan_amount) }}</el-descriptions-item>
        <el-descriptions-item label="批复金额">{{ formatAmount(apiData?.customer?.approval_amount) }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ apiData?.customer?.created_at || '-' }}</el-descriptions-item>
        <el-descriptions-item label="业务员">{{ apiData?.customer?.brokername || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ apiData?.customer?.beizhu || '-' }}</el-descriptions-item>
        <el-descriptions-item label="第三方收款信息" v-if="apiData?.customer?.third_party_type">
          {{ apiData?.customer?.third_party_type === 1 ? '个人' : apiData?.customer?.third_party_type === 2 ? '企业' : '无'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="资产状态" v-if="apiData?.customer?.asset_status">
          {{ apiData?.customer?.asset_status === 1 ? '已解押' : '无' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 流程步骤 -->
      <div class="process-steps">
        <div class="steps-header">
          <h3>业务流程</h3>
        </div>

        <!-- 步骤条 -->
        <div class="steps-wrapper">
          <el-steps :active="activeStep" finish-status="success" process-status="process" direction="horizontal"
            class="all-steps" align-center simple>
            <el-step v-for="(step, index) in stepConfig" :key="index" :title="step.title"
              @click="handleStepClick(index)" class="clickable-step"></el-step>
          </el-steps>
        </div>

        <!-- 详细流程内容 -->
        <div class="step-content-area">
          <el-card v-if="activeStep >= 0" shadow="never" class="step-content-card">
            <template #header>
              <div class="step-card-header">
                <span>{{ getStepTitle(activeStep) }}</span>
              </div>
            </template>

            <!-- 录单环节 -->
            <div v-if="activeStep === 0" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="客户姓名">{{ apiData?.customer?.name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="客户类型">{{ apiData?.customer?.customer_type === 1 ? '个人' : '企业'
                }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ apiData?.customer?.beizhu || '-' }}</el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ apiData?.customer?.created_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.brokername || '-' }}</el-descriptions-item>
                <el-descriptions-item label="证件资料" :span="2" v-if="apiData?.customer?.id_card_front">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.id_card_front" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.id_card_front]" />
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="产权证" :span="2" v-if="apiData?.customer?.property_cert">
                  <div class="image-row">
                    <el-image v-for="(img, idx) in apiData?.customer?.property_cert?.split(',')" :key="idx" :src="img"
                      fit="cover" class="detail-image"
                      :preview-src-list="apiData?.customer?.property_cert?.split(',')" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 司法查询 -->
            <div v-if="activeStep === 1" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="查询结果">正常</el-descriptions-item>
                <el-descriptions-item label="查询内容">征信查询、司法诉讼查询、失信查询</el-descriptions-item>
                <el-descriptions-item label="查询时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="查询人员">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="征信图片" :span="2" v-if="apiData?.customer?.credit_report">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.credit_report" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.credit_report]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 销售处理 -->
            <div v-if="activeStep === 2" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="处理结果">进行中</el-descriptions-item>
                <el-descriptions-item label="借款主体">
                  {{ apiData?.customer?.customer_type === 1 ? '个人' : '企业' }}
                </el-descriptions-item>
                <el-descriptions-item label="借款人信息">{{ apiData?.customer?.borrower_name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="借款用途">企业经营周转</el-descriptions-item>
                <el-descriptions-item label="还款来源">经营收入</el-descriptions-item>
                <el-descriptions-item label="客户来源">直客</el-descriptions-item>
                <el-descriptions-item label="配资情况">
                  {{ apiData?.customer?.leverage_amount ? '有，金额：' + formatAmount(apiData?.customer?.leverage_amount) :
                    '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.brokername || '-' }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions :column="2" border class="mt-20">
                <el-descriptions-item label="上家银行">{{ apiData?.customer?.previous_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="还款金额">{{ formatAmount(apiData?.customer?.repayment_amount)
                }}</el-descriptions-item>
                <el-descriptions-item label="下家银行">{{ apiData?.customer?.next_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="批复金额">{{ formatAmount(apiData?.customer?.approval_amount)
                }}</el-descriptions-item>
                <el-descriptions-item label="预计出款时间">{{ apiData?.customer?.expected_time || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="费用情况">
                  渠道费: {{ formatAmount(apiData?.customer?.channel_fee) || '¥0.00' }},
                  我司费用: {{ formatAmount(apiData?.customer?.company_fee) || '¥0.00' }},
                  杂费: {{ formatAmount(apiData?.customer?.misc_fee) || '¥0.00' }}
                </el-descriptions-item>
                <el-descriptions-item v-if="apiData?.customer?.approval_images" label="批复文件" :span="2">
                  <div class="image-row">
                    <el-image v-for="(img, idx) in apiData?.customer?.approval_images.split(',')" :key="idx" :src="img"
                      fit="cover" class="detail-image"
                      :preview-src-list="apiData?.customer?.approval_images.split(',')" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 面签安排 -->
            <div v-if="activeStep === 3" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="录单人员">{{ apiData?.customer?.brokername || '-' }}</el-descriptions-item>
                <el-descriptions-item label="确认配资">{{ apiData?.customer?.leverage_amount > 0 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="配资金额" v-if="apiData?.customer?.leverage_amount > 0">
                  {{ formatAmount(apiData?.customer?.leverage_amount) }}
                </el-descriptions-item>
                <el-descriptions-item label="面签时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 客户签约 -->
            <div v-if="activeStep === 4" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="签约日期">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="利率">{{ apiData?.customer?.interest_rate || '-' }} /天</el-descriptions-item>
                <el-descriptions-item label="预收费">{{ formatAmount(apiData?.customer?.pre_fee) }}</el-descriptions-item>
                <el-descriptions-item label="托管资料">{{ apiData?.customer?.has_escrow === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item v-if="apiData?.customer?.has_escrow === 1" label="托管资料清单">
                  {{ '个人资料: ' + (apiData?.customer?.escrow_id_front ? '有' : '无') +
                    ', 产权证: ' + (apiData?.customer?.escrow_property ? '有' : '无') }}
                </el-descriptions-item>
                <el-descriptions-item label="核行信息">{{ apiData?.customer?.check_content ? '有' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item v-if="apiData?.customer?.check_content" label="核行方式">
                  {{ apiData?.customer?.check_type === 1 ? '电话' : apiData?.customer?.check_type === 2 ? '实地' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item label="是否需办理顺位">{{ apiData?.customer?.has_priority === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="是否办理赋强公证">{{ apiData?.customer?.has_notary === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions :column="2" border class="mt-20"
                v-if="apiData?.payment_channels && apiData?.payment_channels.length">
                <el-descriptions-item label="出款通道信息" :span="2">
                  <el-table :data="loanChannels" border style="width: 100%" class="mt-10">
                    <el-table-column prop="channel" label="通道" width="180" />
                    <el-table-column prop="amount" label="出款金额" />
                    <el-table-column prop="expectedTime" label="预计出款时间" />
                  </el-table>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions :column="2" border class="mt-20">
                <el-descriptions-item label="房产面积">{{ apiData?.customer?.area || '-' }}㎡</el-descriptions-item>
                <el-descriptions-item label="小区名称">{{ apiData?.customer?.community || '-' }}</el-descriptions-item>
                <el-descriptions-item label="是否二手房">{{ apiData?.customer?.is_second_hand === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="房屋类型">{{ apiData?.customer?.house_type || '-' }}</el-descriptions-item>
                <el-descriptions-item label="是否限制交易">{{ apiData?.customer?.is_limited === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="持证时间">{{ apiData?.customer?.cert_time || '-' }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ apiData?.customer?.beizhu || '-' }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions :column="2" border class="mt-20">
                <el-descriptions-item label="所属行业">{{ apiData?.customer?.industry || '-' }}</el-descriptions-item>
                <el-descriptions-item label="工作类型">{{ apiData?.customer?.work_type || '-' }}</el-descriptions-item>
                <el-descriptions-item label="公司名称">{{ apiData?.customer?.company_name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="贷款品类">{{ apiData?.customer?.loan_category || '-' }}</el-descriptions-item>
                <el-descriptions-item label="贷款年限">{{ apiData?.customer?.loan_years || '-' }}</el-descriptions-item>
                <el-descriptions-item label="剩余年限">{{ apiData?.customer?.remaining_years || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="是否循环贷">{{ apiData?.customer?.is_circle === 1 ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="贷款时间">{{ apiData?.customer?.loan_time || '-' }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 资料整理 -->
            <div v-if="activeStep === 5" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="处理时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ apiData?.customer?.ziliao_remark || '-' }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 风控审批 -->
            <div v-if="activeStep === 6" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="审批意见">{{ apiData?.customer?.approval_desc || '-'
                }}</el-descriptions-item>
                <el-descriptions-item v-if="apiData?.customer?.loan_condition" label="放款前待落实条件">
                  {{ apiData?.customer?.loan_condition }}
                </el-descriptions-item>
                <el-descriptions-item label="审批时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="审批相关资料" :span="2" v-if="apiData?.customer?.approval_images">
                  <div class="image-row">
                    <el-image v-for="(img, idx) in apiData?.customer?.approval_images.split(',')" :key="idx" :src="img"
                      fit="cover" class="detail-image"
                      :preview-src-list="apiData?.customer?.approval_images.split(',')" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>

              <!-- 风控审批的批复条件 -->
              <el-descriptions v-if="apiData?.customer?.has_approval === 1" :column="1" border class="mt-20">
                <el-descriptions-item label="审批批复">
                  <div class="risk-approval">
                    <ul class="approval-conditions">
                      <li>借款金额：{{ formatAmount(apiData?.customer?.approval_amount) }}</li>
                      <li>借款期限：{{ apiData?.customer?.loan_years || '-' }}年</li>
                      <li>利息：{{ apiData?.customer?.interest_rate || '-' }}元/日</li>
                      <li>还款方式：按月付息，到期还本</li>
                    </ul>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 项目上报 -->
            <div v-if="activeStep === 7" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="上报人员">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="上报银行">{{ apiData?.customer?.next_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="上报时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="上报资料" :span="2" v-if="apiData?.customer?.images">
                  <div class="image-row">
                    <el-image v-for="(img, idx) in apiData?.customer?.images?.split(',')" :key="idx" :src="img"
                      fit="cover" class="detail-image" :preview-src-list="apiData?.customer?.images?.split(',')" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 资方受理 -->
            <div v-if="activeStep === 8" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="受理编号">{{ apiData?.customer?.id || '-' }}</el-descriptions-item>
                <el-descriptions-item label="受理机构">{{ apiData?.customer?.next_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="受理时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="银行受理资料" :span="2" v-if="apiData?.customer?.images">
                  <div class="image-row">
                    <el-image v-for="(img, idx) in apiData?.customer?.images?.split(',')" :key="idx" :src="img"
                      fit="cover" class="detail-image" :preview-src-list="apiData?.customer?.images?.split(',')" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 权证托管 -->
            <div v-if="activeStep === 9" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="托管资料">{{ apiData?.customer?.personal_escrow ||
                  apiData?.customer?.company_escrow
                  || '-' }}</el-descriptions-item>
                <el-descriptions-item label="托管时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="托管资料照片" :span="2">
                  <div class="image-row">
                    <el-image v-if="apiData?.customer?.escrow_id_front" :src="apiData?.customer?.escrow_id_front"
                      fit="cover" class="detail-image" :preview-src-list="[apiData?.customer?.escrow_id_front]" />
                    <el-image v-if="apiData?.customer?.escrow_property" :src="apiData?.customer?.escrow_property"
                      fit="cover" class="detail-image" :preview-src-list="[apiData?.customer?.escrow_property]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 风控核实 -->
            <div v-if="activeStep === 10" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="核实备注">{{ apiData?.customer?.loan_condition_remark || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="核实时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="核实资料" :span="2" v-if="apiData?.customer?.escrow_check_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.escrow_check_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.escrow_check_image]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 费用确认 -->
            <div v-if="activeStep === 11" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="确认金额">{{ formatAmount(apiData?.customer?.pre_fee) }}</el-descriptions-item>
                <el-descriptions-item label="确认时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="费用凭证" :span="2" v-if="apiData?.customer?.fee_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.fee_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.fee_image]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 财务放款 -->
            <div v-if="activeStep === 12" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="放款金额">{{ formatAmount(apiData?.customer?.approval_amount)
                }}</el-descriptions-item>
                <el-descriptions-item label="放款银行">{{ apiData?.customer?.next_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="收款人">{{ apiData?.customer?.receiver_name || apiData?.customer?.name || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="收款银行">{{ apiData?.customer?.receiver_bank || '-' }}</el-descriptions-item>
                <el-descriptions-item label="收款账号">{{ apiData?.customer?.receiver_card_no || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="收款人身份证号">{{ apiData?.customer?.receiver_id_card || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="放款时间">{{ apiData?.customer?.loan_time2 || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="放款凭证" :span="2" v-if="apiData?.customer?.bank_loan_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.bank_loan_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.bank_loan_image]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 确认到账 -->
            <div v-if="activeStep === 13" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="到账金额">{{ formatAmount(apiData?.customer?.approval_amount)
                }}</el-descriptions-item>
                <el-descriptions-item label="收款人">{{ apiData?.customer?.receiver_name || apiData?.customer?.name || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="到账时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="到账凭证" :span="2" v-if="apiData?.customer?.receipt_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.receipt_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.receipt_image]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 资料入库 -->
            <div v-if="activeStep === 15" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="入库时间">{{ apiData?.customer?.rukutime ? new Date(apiData?.customer?.rukutime
                  *
                  1000).toLocaleString() : '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="入库照片" :span="2">
                  <div class="image-row">
                    <el-image v-if="apiData?.customer?.archive_image" :src="apiData?.customer?.archive_image"
                      fit="cover" class="detail-image" :preview-src-list="[apiData?.customer?.archive_image]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 待扣款/待解押/新行入押等后续状态 -->
            <div v-if="activeStep >= 16 && activeStep <= 23" class="step-detail">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="当前状态">{{ formatStatus(apiData?.customer?.status) || '处理中'
                }}</el-descriptions-item>
                <el-descriptions-item label="处理内容">{{ apiData?.customer?.beizhu || '正在处理中' }}</el-descriptions-item>
                <el-descriptions-item label="处理时间">{{ apiData?.customer?.updated_at || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ apiData?.customer?.operatorname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="跟踪记录" :span="2">
                  <div v-if="apiData?.tracking && apiData.tracking.length > 0">
                    <el-timeline>
                      <el-timeline-item v-for="(track, index) in apiData.tracking" :key="index"
                        :timestamp="track.track_date || track.created_at" type="primary">
                        <div v-if="track.image_url" class="image-row">
                          <el-image :src="track.image_url" fit="cover" class="detail-image"
                            :preview-src-list="[track.image_url]" />
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                  <div v-else>暂无跟踪记录</div>
                </el-descriptions-item>
                <el-descriptions-item label="解押图片" :span="2" v-if="apiData?.customer?.unpledge_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.unpledge_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.unpledge_image]" />
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="扣款截图" :span="2" v-if="apiData?.customer?.deduct_image">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.deduct_image" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.deduct_image]" />
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="愉快办理截图" :span="2" v-if="apiData?.customer?.yukuaibanli">
                  <div class="image-row">
                    <el-image :src="apiData?.customer?.yukuaibanli" fit="cover" class="detail-image"
                      :preview-src-list="[apiData?.customer?.yukuaibanli]" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 出款通道 -->
      <div class="loan-channels mt-20" v-if="loanChannels && loanChannels.length > 0">
        <h3>出款通道</h3>
        <el-table :data="loanChannels" style="width: 100%">
          <el-table-column prop="channel" label="通道名称" />
          <el-table-column prop="amount" label="出款金额" />
          <el-table-column prop="expectedTime" label="预计出款时间" />
        </el-table>
      </div>

      <!-- 预收费列表 -->
      <div class="pre-fees mt-20" v-if="apiData?.pre_fees && apiData.pre_fees.length > 0">
        <h3>预收费列表</h3>
        <el-table :data="apiData.pre_fees" style="width: 100%">
          <el-table-column prop="amount" label="金额">
            <template #default="scope">
              {{ formatAmount(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="情况描述" />
          <el-table-column prop="created_at" label="创建时间" />
          <el-table-column prop="updated_at" label="更新时间" />
        </el-table>
      </div>

      <!-- 资方信息 -->
      <div class="investor-info mt-20" v-if="apiData?.investor">
        <h3>资方信息</h3>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="资方名称">{{ apiData.investor.company_name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="法人名称">{{ apiData.investor.legal_person || '-' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ apiData.investor.phone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="资金额度">{{ formatAmount(apiData.investor.fund_amount) }}</el-descriptions-item>
          <el-descriptions-item label="可用额度">{{ formatAmount(apiData.investor.available_amount)
          }}</el-descriptions-item>
          <el-descriptions-item label="已用额度">{{ formatAmount(apiData.investor.used_amount) }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ apiData.investor.status === 1 ? '启用' : '禁用' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { getCustomerDetail } from '@/api/customer';
import type { CustomerDetailResponse } from '@/api/customer';
import { Document, Search, Operation, User, DocumentChecked, Files, Warning, UploadFilled, More } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 获取订单ID
const orderId = ref(route.params.id as string);

// 当前激活的步骤
const activeStep = ref(0);
const loading = ref(false);

// API返回的数据
const apiData = ref<CustomerDetailResponse['data']>();

// 状态到步骤的映射
const statusStepMap: Record<number, number> = {
  1: 0,  // 已录单 - 录单环节
  3: 1,  // 待处理 - 司法查询
  4: 2,  // 待面签 - 销售处理
  5: 3,  // 已签约 - 面签安排
  6: 4,  // 审核资料 - 客户签约
  7: 5,  // 风控审批
  8: 6,  // 提级审批
  9: 7,  // 项目上报
  10: 8, // 资方确认
  11: 9, // 确认托管资料
  12: 10, // 风控核实
  13: 11, // 费用核实
  14: 12, // 待放款
  15: 13, // 放款待确认
  16: 14, // 资料待入库
  17: 15, // 待扣款
  18: 16, // 待解押
  19: 17, // 新行入押
  20: 18, // 银行放款
  21: 19, // 待还款
  22: 20, // 还款待核实
  23: 21, // 待完成
  24: 22, // 已完成
  25: 23  // 已取消
};

// 状态文本映射
const statusTextMap: Record<number, string> = {
  1: '已录单',
  3: '待处理',
  4: '待面签',
  5: '已签约',
  6: '审核资料',
  7: '风控审批',
  8: '提级审批',
  9: '项目上报',
  10: '资方确认',
  11: '确认托管资料',
  12: '风控核实',
  13: '费用核实',
  14: '待放款',
  15: '放款待确认',
  16: '资料待入库',
  17: '待扣款',
  18: '待解押',
  19: '新行入押',
  20: '银行放款',
  21: '待还款',
  22: '还款待核实',
  23: '待完成',
  24: '已完成',
  25: '已取消'
};

// 获取状态对应的类型
const getStatusType = (status: string | number | undefined | null): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
  if (status === undefined || status === null) {
    return 'info';
  }

  const statusMap: Record<string, 'primary' | 'success' | 'info' | 'warning' | 'danger'> = {
    '1': 'info',     // 已录单
    '3': 'info',     // 待处理
    '4': 'warning',  // 待面签
    '5': 'primary',  // 已签约
    '6': 'primary',  // 审核资料
    '7': 'warning',  // 风控审批
    '8': 'warning',  // 提级审批
    '9': 'primary',  // 项目上报
    '10': 'primary', // 资方确认
    '11': 'primary', // 确认托管资料
    '12': 'warning', // 风控核实
    '13': 'primary', // 费用确认
    '14': 'warning', // 待放款
    '15': 'warning', // 放款待确认
    '16': 'primary', // 资料待入库
    '17': 'primary', // 待扣款
    '18': 'primary', // 待解押
    '19': 'warning', // 新行入押
    '20': 'success', // 银行放款
    '21': 'primary', // 待还款
    '22': 'warning', // 还款待核实
    '23': 'primary', // 待完成
    '24': 'success', // 已完成
    '25': 'danger'   // 已取消
  };
  return statusMap[status.toString()] || 'info';
};

// 格式化状态显示文本
const formatStatus = (status: string | number | undefined | null): string => {
  if (status === undefined || status === null) {
    return '未知状态';
  }
  return statusTextMap[Number(status)] || '未知状态';
};

// 格式化金额
const formatAmount = (amount: number | undefined | null): string => {
  if (amount === undefined || amount === null) return '¥0.00';
  return `¥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};

// 下载文件
const downloadFile = (url: string) => {
  if (!url) return;
  window.open(url, '_blank');
};

// 在新窗口打开文件
const openFile = (url: string) => {
  window.open(url, '_blank');
};

// 根据订单状态设置当前步骤
const setActiveStepFromStatus = (status: number | undefined | null) => {
  if (status === undefined || status === null) {
    activeStep.value = 0; // 默认步骤
    return;
  }

  // 直接使用状态值作为步骤索引，因为我们的步骤配置已经按状态排序
  // 注意：状态值从1开始，数组索引从0开始，所以需要减1
  if (status >= 1 && status <= 25) {
    activeStep.value = status - 1;
  } else {
    activeStep.value = 0; // 默认步骤
  }
};

// 初始化函数在onMounted中调用

// 初始化数据
const init = async () => {
  try {
    loading.value = true;
    // 获取订单详情
    const res = await getCustomerDetail(orderId.value);
    apiData.value = res.data;

    // 根据状态设置当前步骤
    if (apiData.value?.customer?.status !== undefined && apiData.value?.customer?.status !== null) {
      setActiveStepFromStatus(apiData.value.customer.status);
    } else {
      activeStep.value = 0; // 默认步骤
    }
  } catch (error) {
    console.error('获取订单详情失败', error);
    ElMessage.error('获取订单详情失败');
  } finally {
    loading.value = false;
  }
};

// 获取步骤标题
const getStepTitle = (step: number): string => {
  return step >= 0 && step < stepConfig.length ? stepConfig[step].title : '';
};

// 当前状态文字
const currentStatusText = computed(() => {
  if (!apiData.value?.customer?.status) return '';
  const status = apiData.value.customer.status;
  return statusTextMap[status] || '未知状态';
});

// 步骤配置
const stepConfig = [
  { title: '已录单', description: '销售录入' },
  { title: '待处理', description: '司法查询' },
  { title: '待面签', description: '销售处理' },
  { title: '已签约', description: '面签安排' },
  { title: '审核资料', description: '客户签约' },
  { title: '风控审批', description: '风控审核' },
  { title: '提级审批', description: '提级处理' },
  { title: '项目上报', description: '运营上报' },
  { title: '资方确认', description: '银行受理' },
  { title: '确认托管资料', description: '材料托管' },
  { title: '风控核实', description: '条件确认' },
  { title: '费用核实', description: '预收费确认' },
  { title: '待放款', description: '款项准备' },
  { title: '放款待确认', description: '放款处理' },
  { title: '资料待入库', description: '资料整理' },
  { title: '待扣款', description: '扣款处理' },
  { title: '待解押', description: '解押处理' },
  { title: '新行入押', description: '新行处理' },
  { title: '银行放款', description: '银行出款' },
  { title: '待还款', description: '还款处理' },
  { title: '还款待核实', description: '还款确认' },
  { title: '待完成', description: '业务完结' },
  { title: '已完成', description: '业务已完成' },
  { title: '已取消', description: '业务已取消' }
];

// 处理步骤点击
const handleStepClick = (index: number) => {
  activeStep.value = index;
};

// 出款通道数据
const loanChannels = computed(() => {
  if (!apiData.value || !apiData.value.payment_channels) {
    return [];
  }

  return apiData.value.payment_channels.map(channel => ({
    channel: `通道${channel.id}`,
    amount: formatAmount(channel.amount),
    expectedTime: channel.expected_time || '-'
  }));
});

// 返回列表
const goBack = () => {
  router.push('/business-manage/self-loan');
};

// 根据订单状态获取当前步骤
const getCurrentStep = (): number => {
  // 确保 customer 存在且有 status 值
  if (!apiData.value?.customer?.status) return 0;

  const status = apiData.value.customer.status;

  // 直接使用状态值作为步骤索引，因为我们的步骤配置已经按状态排序
  // 注意：状态值从1开始，数组索引从0开始，所以需要减1
  if (status >= 1 && status <= 25) {
    return status - 1;
  }

  return 0;  // 默认返回第一个步骤
};

// 页面初始化
onMounted(() => {
  init();
});
</script>

<style scoped>
.business-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.process-steps {
  margin-top: 30px;
}

.process-steps h3 {
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 18px;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.process-steps h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  border-radius: 2px;
}

.step-detail {
  padding: 15px 0;
  line-height: 2;
  color: #606266;
}

.step-detail p {
  margin-bottom: 8px;
}

.step-operator {
  color: #909399;
  margin-top: 8px;
  font-style: italic;
}

.step-pending {
  color: #909399;
  font-style: italic;
  padding: 10px 0;
}

.step-files {
  margin-bottom: 16px;
}

.file-list {
  padding-left: 20px;
  margin: 8px 0;
}

.file-list li {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s;
}

.file-list li:hover {
  background-color: #f0f2f5;
}

.timeline-detail {
  color: #606266;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.timeline-operator {
  color: #909399;
  margin-top: 5px;
  font-size: 13px;
  font-style: italic;
  text-align: right;
}

.ml-10 {
  margin-left: 10px;
}

:deep(.el-descriptions) {
  margin-bottom: 20px;
}

:deep(.el-descriptions__header) {
  margin-bottom: 16px;
}

:deep(.el-descriptions__title) {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  font-weight: 500;
}

.all-steps {
  margin: 20px 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.clickable-step {
  cursor: pointer;
}

:deep(.clickable-step .el-step__head),
:deep(.clickable-step .el-step__title),
:deep(.clickable-step .el-step__description) {
  transition: all 0.3s;
}

:deep(.clickable-step:hover .el-step__title) {
  color: #409EFF;
}

:deep(.clickable-step:hover .el-step__description) {
  color: #409EFF;
}

:deep(.clickable-step:hover .el-step__head:not(.is-process):not(.is-finish) .el-step__icon) {
  border-color: #409EFF;
}

.step-content-area {
  margin-top: 30px;
}

.step-content-card {
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.step-content-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.step-card-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__header) {
  padding: 16px 24px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  font-size: 18px;
  color: #303133;
}

:deep(.el-button--text) {
  font-weight: 500;
}

/* 只保留水平滚动功能，其他使用默认样式 */
.steps-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

.all-steps {
  min-width: 2000px;
  /* 确保有足够的宽度显示所有步骤 */
}

:deep(.el-steps) {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  padding: 20px;
}

.clickable-step {
  cursor: pointer;
}

.step-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.detail-image {
  width: 200px;
  height: 150px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ebeef5;
}

.detail-image:hover {
  transform: none;
  box-shadow: none;
}

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mt-10 {
  margin-top: 10px;
}

.document-title {
  font-weight: 600;
  font-size: 16px;
  margin: 20px 0 10px;
  color: #303133;
  position: relative;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.section-title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
  margin-bottom: 10px;
}

.action-buttons {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}

.action-footer {
  margin-top: 15px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.image-title {
  font-size: 14px;
  color: #606266;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.status-tag .el-tag {
  margin-left: 8px;
}

/* 在页面顶部添加一个状态指示器 */
.status-indicator {
  background-color: #f6f9fc;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-indicator .status-title {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.status-indicator .status-value {
  display: flex;
  align-items: center;
}

.status-indicator .status-desc {
  margin-left: 8px;
  color: #606266;
}

.customer-type-tag {
  margin-left: 8px;
}
</style>